<style lang="less" scoped>
  @import "../assets/css/variable.less"; // less变量
  .mine_order {
    width: 100%;
    height: 100%;
    > header{
      width: 100%;
      height: 88px;
      line-height: 88px;
      text-align: center;
      font-size: 32px;
      color: #333333;
      background: #fff;
      border-bottom: 1px solid #F5F5F5;
      position: relative;
      // position: fixed;
      // top: 0;
      // left: 0;
      // z-index: 20;
      .icon-box{
        width: 80px;
        height: 88px;
        position: absolute;
        left: 0px;
        top:0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 88px);
      border-bottom: constant(safe-area-inset-bottom) solid transparent;
      border-bottom: env(safe-area-inset-bottom) solid transparent;
      // padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
      // padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
      overflow: hidden;
      // position: fixed;
      // top: 88px;
      // left: 0;
      // z-index: 20;
      background: #F5F5F5;
      .loading {
        width: 100%;
        height: 500px;
        display: flex;
        > i {
          width: 100px;
          height: 100px;
          margin: auto;
          background: url('../assets/images/refresh.png') center/100% no-repeat;
          animation: load .5s ease-in-out 0s infinite;
          @keyframes load {
            0% {
              transform: rotateZ(0deg);
            }
            100% {
              transform: rotateZ(360deg);
            }
          }
        }
      }
      .empty {
        width: 100%;
        position: absolute;
        top: 350px;
        left: 0;
        .flex_center();
        .box {
          .flex_center();
          flex-direction: column;
          img {
            width: 325px;
            height: 325px;
          }
          .tips {
            margin-top: 20px;
            > span, a {
              white-space: nowrap;
              font-size: 26px;
              color: #999;
            }
            > a {
              margin-left: 4px;
              color: #1690FF !important;
              text-decoration: underline;
            }
          }
        }
      }
      .inner {
        min-height: 100%;
        overflow: hidden;
        > li {
          margin: 30px 10px 30px;
          padding: 20px  20px 0 20px;
         
          font-size: 0;background: #FFFFFF;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
          position: relative;
          .avatar {
            width: 190px;
            height: 190px;
            margin-right: 20px;
            display: inline-block;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            > img {
              width: 100%;
              height: 100%;
              font-size: 0;
            }
            .lesson_info {
              width: 100%;
              height: 40px;
              line-height: 40px;
              position: absolute;
              left: 0;
              bottom: 0;
              background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
              text-align: right;
              font-size: 20px;
              color: #fff;
              padding-right: 4px;
            }
          }
          .info {
            width: calc(100% - 190px - 20px);
            height: 190px;
            display: inline-block;
            position: relative;
            .title_area {
              width: 100%;
              height: 88px;
              position: absolute;
              top: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-start;
              .title {
                width: 100%;
                height: 42px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                > i {
                  height: 32px;
                  line-height: 32px;
                  padding: 0px 4px;
                  font-style: normal;
                  background: #5B76FF;
                  color: #FFF;
                  font-size: 20px;
                  white-space: nowrap;
                  border-radius: 5px;
                  margin-right: 10px;
                }
                > span {
                  color: #333;
                  font-size: 30px;
                  white-space: nowrap;
                  flex: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
              .sub_title {
                width: 100%;
                height: 37px;
                line-height: 37px;
                font-size: 26px;
                color: 999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .price_area {
              width: 100%;
              height: 60px;
              position: absolute;
              left: 0;
              bottom: 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .price {
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                letter-spacing: -1px;
                .span1 {
                  font-size: 32px;
                  color: #FF0000;
                }
                .span2 {
                  color: #999999;
                  font-size: 20px;
                  margin-left: 5px;
                  text-decoration: line-through;
                }
              }
              .btn {
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                .pv {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  margin-right: 10px;
                  > i {
                    width: 24px;
                    height: 24px;
                    margin-right: 4px;
                    background: url('../assets/images/zxjtqh/pv_fire_type2.png') center/100% no-repeat;
                    transform: translateY(-2px);
                  }
                  > span {
                    color: #FF7A00;
                    font-size: 22px;
                  }
                }
                .buy {
                  height: 60px;
                  padding: 9px 24px;
                  border: 1px solid #5B76FF;
                  color: #5B76FF;
                  font-size: 30px;
                  display: flex;
                  border-radius: 30px;
                  span {
                    margin: auto;
                  }
                }
              }
            }
          }
          .dead_time {
            width: 100%;
            height: 73px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            border-top: 1px solid #F5F5F5;
            // position: absolute;
            // left: 0;
            // bottom: -74px;
            background: #fff;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            padding: 0 30px;
            position: relative;
            span {
              font-size: 26px;
              color: #999999;
              flex: 1;
             
            }
            .more-btn{
              height: 40px;
              line-height: 40px;
            }
            .cancle-btn{
              // border: 1px solid  rgba(51, 51, 51, 0.322);
              padding: 16px 30px 16px 20px;
              border-radius: 6px;
              font-size: 24px;
              color:#333 ;
              position: absolute;
              top: 55px;
              left: 30px;
              z-index: 10;
              background: #fff;
              box-shadow: 2px 2px 7px  #999999;
            }
            .end-time{
              flex: 1;
              text-align: right;
            }
          }
        }
        .pullup-tips {
          padding: 20px;
          text-align: center;
          color: #999;
        }
      }
    }
  }
</style>

<template>
  <div class="mine_order">
    <!-- 头部 -->
    <header>
      <div class="icon-box" @click="() => $router.back()">
        <van-icon name="arrow-left" size="1.2rem" color="#333333"/>
      </div> 				
      <p>我的订购</p>
    </header>
    <div class="content" ref="content">
      <div class="loading" v-if="loading"><i></i></div>
      <div class="empty" v-else-if="!orderList.length">
        <div class="box">
          <img :src="require('../assets/images/zxjtqh/empty_order.png')" alt="">
          <div class="tips">
            <span>当前无订购课程，去看看</span>
            <router-link :to="`/${this.$channel}/niceCourse`">课程专区</router-link>
          </div>
        </div>
      </div>
      <ul class="inner" ref="inner" v-else>
        <li v-for="(item, index) in orderList" :key="index">
          <div class="avatar"  @click="() => handleEnterCourse(item)">
            <img :src="item.imgUrl +'?x-oss-process=image/resize,m_fixed,h_190,w_190'" alt="">
            <div class="lesson_info">{{item | lessonFilter}}</div>
          </div>
          <div class="info"  @click="() => handleEnterCourse(item)">
            <div class="title_area">
              <div class="title"><i v-if="item.totalLessonNum && item.totalLessonNum > 1">系列</i><span>{{item.title}}</span></div>
              <div class="sub_title">{{item.subTitle}}</div>
            </div>
            <div class="price_area">
              <div class="price">
                <span class="span1">{{item | priceFilter}}</span>
                <span class="span2" v-if="(item.priceType === 1 && item.buyPrice && item.linePrice)">￥{{item.linePrice}}.00</span>
              </div>
              <div class="btn">
                <div class="pv"><i></i><span>{{item.pv}}</span></div>
                <div class="buy"><span>观看</span></div>
              </div>
            </div>
          </div>
          <div class="dead_time">
            <span @click="clickMore(item,index)" class="more-btn" v-if="item.priceType == 0">更多</span>
            <span v-if="index == clickIndex" class="cancle-btn" @click="clickCancelSub(item,index)">取消订阅</span>              
            <span class="end-time"  :style="{color:item.expired?'#FF0000':''}">{{item | deadTimeFilter}}</span>
          </div>
        </li>
        <div class="pullup-tips" v-if="showPullup">
          <div v-if="!isPullUpLoad" class="before-trigger">
            <span class="pullup-txt">{{isNoMore ? '没有更多数据了' : '上拉加载更多'}}</span>
          </div>
          <div v-else class="after-trigger">
            <span class="pullup-txt">加载中...</span>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>

  import fun from "../util/function";
  import BScroll from '@better-scroll/core';
  import Pullup from '@better-scroll/pull-up';
  import { cancelSubscribeCourse , dotNum} from '@/util/api.js'
  //import dayjs from 'dayjs';
  BScroll.use(Pullup);
  export default {
    name: "mineOrder",
    data() {
      return {
        orderList: [],
        page: 1,
        pageSize: 10,
        loading: false,
        showPullup: false,
        isPullUpLoad: false,
        isNoMore: false,
        clickIndex:'ruan'
      }
    },
    filters: {
      lessonFilter(item) {
        const { hasFinishLessonNum, totalLessonNum } = item;
        if (totalLessonNum) {
          if (hasFinishLessonNum === totalLessonNum) {
            return `共${totalLessonNum}节`
          } else {
            return `更新至${hasFinishLessonNum > 9 ? hasFinishLessonNum : '0' + hasFinishLessonNum}节`;
          }
        } else {
          return `更新至${hasFinishLessonNum > 9 ? hasFinishLessonNum : '0' + hasFinishLessonNum}节`;
        }
      },
      priceFilter(item) {
        const { priceType, buyPrice, validType } = item;
        //priceType 0-免费，1-付费   validType0-永久有效，1-固定天数，2-自定义日期
        if (priceType === 0) {// 免费
          if (validType === 0) {
            return '免费';
          } else {
            return '限时免费';
          }
        } else {// 付费
          if (buyPrice) {
            // 有价格
            return `￥${buyPrice}.00`;
          } else {
            // 没价格
            return '付费';
          }
        }
      },
      deadTimeFilter(item) {
        const { validType , expiredDate} = item;
        if (validType === 0) {
          // 永久有效
          return '永久有效';
        } else {
          return expiredDate + '到期';
        } 
      },
    },
    mounted() {
      // 获取orderList
      this.getOrderList();
      dotNum('mineCoursePage')
    },
    methods: {
   async clickCancelSub(item,index){
        this.clickIndex = 'ruan';
        const { courseId } = item;
        const msgData = await cancelSubscribeCourse(courseId)
        const {data:{code,data}} = msgData || {}
        if(code === '000000' && data){
          fun.toastMessage('取消订阅成功')
          this.orderList.splice(index,1)
        }     
      },
      clickMore(item,index){     
        if(this.clickIndex == 'ruan'){
          this.clickIndex = index
        }else{
          this.clickIndex = 'ruan'
        }
      },
      // 获取orderList数据
      async getOrderList() {
        this.loading = true;
        await this.requestData();
        this.loading = false;
        this.$nextTick(() => {
          this.bs =  new BScroll('.content', {
            pullUpLoad: true,
            click: true,
          })
          // 判断是否需要上拉加载
          if(this.orderList.length !== 0 && this.$refs.inner.clientHeight > this.$refs.content.clientHeight) {
            this.showPullup = true;
            this.$nextTick(() => {
              this.bs.refresh();
              this.bs.on('pullingUp', this.pullingUpHandler);
            })
          }
        })
      },
      async pullingUpHandler() {
        this.isPullUpLoad = true;
        this.page += 1;
        await this.requestData();
        this.bs.finishPullUp();
        this.bs.refresh();
        this.isPullUpLoad = false;
        if (this.isNoMore) this.bs.closePullUp();
      },
      requestData() {
        return new Promise(resolve => {
          this.$http.get("/h5live/course/myCourses", {
            params: {
              page: 1,
              pageSize: 10,
            }
          }).then(res => {
            this.loading = false;
            if(res.data.code === "000000") {
              if (res.data.data.length === 0) this.isNoMore = true;
              this.orderList = [...this.orderList, ...res.data.data];
              resolve();
            } else {
              return Promise.reject(res.data);
            }
          }).catch(err => {
            console.error(err);
          });
        })
      },
      // 判断课程详情/课节
      handleEnterCourse(course) {
        fun.handleEnterCourse(course);
      },
    }
  };
</script>
